<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>13.1 异步组件要解决的问题</title>
</head>

<body>
    <div id="app">
        
    </div>
</body>
    <script src="https://unpkg.com/@vue/reactivity@3.0.5/dist/reactivity.global.js"></script>
    <script>
        /**
         * 
         * CompA 组件是同步渲染的，而动态组件绑定了asyncComp 变量。
         * 
         * <template>
         *    <CompA />
         *    <component :is="asyncComp" />
         * </template>
         * <script>
         *     import { shallowRef } from 'vue'
         *     import CompA from 'CompA.vue'
         * 
         * export default {
         *     components: { CompA },
         *     setup() {
         *         const asyncComp = shallowRef(null)
         * 
         *         // 异步加载 CompB 组件
         *         import('CompB.vue').then(CompB => asyncComp.value = CompB)
         * 
         *         return {
         *             asyncComp
         *         }
         *     }
         * }
         * <\/script>
         * */ 

        /**
         * 通常在异步加载组件时，我们还要考虑以下几个方面。
         * - 如果组件加载失败或加载超时，是否要渲染 Error 组件？
         * - 组件在加载时，是否要展示占位的内容？
         *    例如渲染一个 Loading 组件。
         * - 组件加载的速度可能很快，也可能很慢，是否要设置一个延迟展示 Loading 组件的时间？
         *    如果组件在 200ms 内没有加载成功才展示 Loading 组件，这样可以避免由组件加载过快所导致的闪烁。
         * - 组件加载失败后，是否需要重试？
         * 
         * 需要在框架层面为异步组件提供更好的封装支持，与之对应的能力如下。
         * - 允许用户指定加载出错时要渲染的组件。
         * - 允许用户指定 Loading 组件，以及展示该组件的延迟时间。
         * - 允许用户设置加载组件的超时时长。
         * - 组件加载失败时，为用户提供重试的能力
         * */  



    </script>
    

</html>